// import React, { useEffect, useState } from "react";
// import {
//   Form,
//   InputNumber,
//   Popconfirm,
//   Table,
//   Typography,
//   Button,
//   Input,
//   Select,
// } from "antd";
// // import {getprking} from '../../api/2operation_maintenance/2parking'
// import "./2.scss";
// const App = () => {
//   const { Option } = Select;
//   const layout = {
//     labelCol: {
//       span: 8,
//     },
//     wrapperCol: {
//       span: 16,
//     },
//   };
//   const tailLayout = {
//     wrapperCol: {
//       offset: 8,
//       span: 16,
//     },
//   };
//   const [form] = Form.useForm();
//   const onGenderChange = (value) => {
//     switch (value) {
//       case "male":
//         form.setFieldsValue({
//           note: "Hi, man!",
//         });
//         break;
//       case "female":
//         form.setFieldsValue({
//           note: "Hi, lady!",
//         });
//         break;
//       case "other":
//         form.setFieldsValue({
//           note: "Hi there!",
//         });
//         break;
//       default:
//     }
//   };
//   const onFinish = (values) => {
//     console.log(values);
//   };
//   const onReset = () => {
//     form.resetFields();
//   };
//   const onFill = () => {
//     form.setFieldsValue({
//       note: "Hello world!",
//       gender: "male",
//     });
//   };
//   useEffect(() => {
//     // getprking().then((res) => {
//     //   console.log(res.data);
//     //   setData(res.data);
//     // });
//   }, []);

//   const originData = [];
//   for (let i = 0; i < 100; i++) {
//     originData.push({
//       key: i.toString(),
//       name: `Edward ${i}`,
//       age: 32,
//       address: `London Park no. ${i}`,
//     });
//   }
//   const EditableCell = ({
//     editing,
//     dataIndex,
//     title,
//     inputType,
//     record,
//     index,
//     children,
//     ...restProps
//   }) => {
//     const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
//     return (
//       <td {...restProps}>
//         {editing ? (
//           <Form.Item
//             name={dataIndex}
//             style={{
//               margin: 0,
//             }}
//             rules={[
//               {
//                 required: true,
//                 message: `Please Input ${title}!`,
//               },
//             ]}
//           >
//             {inputNode}
//           </Form.Item>
//         ) : (
//           children
//         )}
//       </td>
//     );
//   };
//   const [data, setData] = useState(originData);
//   const [editingKey, setEditingKey] = useState("");
//   const isEditing = (record) => record.key === editingKey;
//   const edit = (record) => {
//     form.setFieldsValue({
//       name: "",
//       age: "",
//       address: "",
//       ...record,
//     });
//     setEditingKey(record.key);
//   };
//   const cancel = () => {
//     setEditingKey("");
//   };

//   const columns = [
//     {
//       title: "序号",
//       render: function (text, record, index) {
//         return <h3>{index + 1}</h3>;
//       },
//     },
//     {
//       title: "所在省份",
//       dataIndex: "asidekind",
//     },
//     {
//       title: "所在城市",
//       dataIndex: "nickname",
//     },
//     {
//       title: "所在县区",
//       dataIndex: "kind",
//     },
//     {
//       title: "道路站点名称",
//       dataIndex: "kind11",
//     },
//     {
//       title: "操作",
//       dataIndex: "operation",
//       render: (_, record) => {
//         return (
//           <>
//             <Typography.Link onClick={() => edit(record)}>操作</Typography.Link>
//             <Typography.Link
//               onClick={() => edit(record)}
//               style={{ marginLeft: "10px", marginRight: "10px" }}
//             >
//               删除
//             </Typography.Link>
//             <Typography.Link onClick={() => edit(record)}>查看</Typography.Link>
//           </>
//         );
//       },
//     },
//   ];
//   const mergedColumns = columns.map((col) => {
//     if (!col.editable) {
//       return col;
//     }
//     return {
//       ...col,
//       onCell: (record) => ({
//         record,
//         inputType: col.dataIndex === "age" ? "number" : "text",
//         dataIndex: col.dataIndex,
//         title: col.title,
//         editing: isEditing(record),
//       }),
//     };
//   });


//   return (
//     <>
//       <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
//         <div className="up">
//           <Form.Item
//             name="note"
//             label="道路站点名称"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input />
//           </Form.Item>
//           <Form.Item
//             name="note"
//             label="停车场编号"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input />
//           </Form.Item>
//           <Form.Item
//             name="note"
//             label="停车场状态"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input />
//           </Form.Item>
//           <Form.Item
//             name="note"
//             label="停车场属性"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input />
//           </Form.Item>
//         </div>
//         <div className="bottom">
//           <Form.Item
//             name="gender"
//             label="所属区域"
//           >
//           <div className="select">
//           <Select
//               placeholder="Select a option and change input text above"
//               onChange={onGenderChange}
//               allowClear
//             >
//               <Option value="male">male</Option>
//               <Option value="female">female</Option>
//               <Option value="other">other</Option>
//             </Select>
//             <Select
//               placeholder="Select a option and change input text above"
//               onChange={onGenderChange}
//               allowClear
//               style={{width:'200px'}}
//             >
//               <Option value="male">male</Option>
//               <Option value="female">female</Option>
//               <Option value="other">other</Option>
//             </Select>
//             <Select
//               placeholder="Select a option and change input text above"
//               onChange={onGenderChange}
//               allowClear
//             >
//               <Option value="male">male</Option>
//               <Option value="female">female</Option>
//               <Option value="other">other</Option>
//             </Select>
//           </div>
//           </Form.Item>
//           <Form.Item
//            style={{width:300}}
//             name="gender"
//             label="所属道路"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Select
//               placeholder="Select a option and change input text above"
//               onChange={onGenderChange}
//               allowClear
//             >
//               <Option value="male">male</Option>
//               <Option value="female">female</Option>
//               <Option value="other">other</Option>
//             </Select>
//           </Form.Item>
//           <Form.Item {...tailLayout} name="btn"  style={{width:300}}>
//             <Button htmlType="button" onClick={onReset}>
//               重置
//             </Button>
//             <Button
//               type="primary"
//               htmlType="submit"
//               style={{ marginLeft: "10px", marginRight: "10px" }}
//             >
//               查询
//             </Button>
//             <Button type="primary" htmlType="button" onClick={onFill}>
//               新增
//             </Button>
//           </Form.Item>
//         </div>
//       </Form>
//       <Form form={form} component={false}>
//         <Table
//             size='middle'
//           components={{
//             body: {
//               cell: EditableCell,
//             },
//           }}
//           bordered
//           dataSource={data}
//           columns={mergedColumns}
//           rowClassName="editable-row"
//           pagination={{
//             onChange: cancel,
//             position: ['topLeft']
           
//           }
//         }
//         />
//       </Form>
//     </>
//   );
// };

// export default App;
